<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="container"></div>
<script>
  const total = 100000;

  let index = 0; // 偏移量
  let id = 0; //递增的内容

  function load(){
    index += 50; //50个50个的渲染
    if (index < total){
      setTimeout(()=>{ // 分片渲染 因为定时是一个宏任务 会等待ui渲染完成后才执行
        /*for (let i = 0; i < 50; i++) {
          let li = document.createElement('li');
          li.innerHTML = id++;

          container.appendChild(li)
        } // ← 也可以用 requestAnimationFrame*/

        /** ↓兼容低版本浏览器写法(fragment */
        for (let i = 0; i < 50; i++) {
          const li = document.createElement('li');
          li.innerHTML = id++;

          // container.appendChild(li)
          //
          //低版本浏览器(IE)需要使用文档碎片, 因为每次创建一个li往里塞的时候就会回流页面, 故为了兼容↓
          const fragment = document.createDocumentFragment()
          fragment.appendChild(li);
        } // ← 也可以用 requestAnimationFrame
        container.appendChild(fragment); //新版浏览器都会自动识别你是否在不停的往文档里塞dom从而进行优化, 不用像现在这样写

        load();
      },0/*←查看mdn 即使设置为0 实际上并不是 而是会有一个最小值(emmm 不知道这最新值是不是因为考虑到浏览器刷新频率)*/)
    }
  }

  load();

  //这样做以后 你会发现 页面一下就有东西了  但往下拉滚动条 会发现页面还在渲染中 （整个渲染过程 会比直接一次性循环完要慢很多 因为浏览器大约16.7ms刷新渲染一次 渲染完后才会执行宏任务

  //todo: 10w个li的dom都在页面上, 机器差的很容易就会造成卡顿, So 现在长列表渲染一般使用 虚拟列表优化(只渲染一部分
</script>
</body>
</html>
